<template>
    <div class="role">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>角色权限</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content">
                        <div class="add-btn">
                            <el-button type="primary" @click="dialogVisible = true">添加角色</el-button>
                        </div>
                        <ul class="role-list">
                            <li :class="roleid == item.id?'active':''" v-for="item in rolesList" @click="getRolesPotence(item.id)">{{item.roleName}}</li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content">
                        <div class="save-btn">
                            <el-button type="success" @click="bindRolesPotence()">保存</el-button>
                            <el-button type="primary" @click="potenceVisible = true">新增</el-button>
                            <el-button type="danger" @click="removeTree">删除</el-button>
                        </div>
                        <el-tree v-loading="loading" :data="potenceList" default-expand-all show-checkbox node-key="id" ref="tree" :props="defaultProps" @check-change="nodeClick">
                            <!-- @node-click="nodeClick" -->
                        </el-tree>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="添加角色" :visible.sync="dialogVisible" width="400px">
            <el-input v-model="addName" placeholder="请输入角色名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="crerat()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加后台资源权限" :visible.sync="potenceVisible" width="400px">
            <div>
                <template>
                    <el-radio v-model="radio" label="GET">GET</el-radio>
                    <el-radio v-model="radio" label="POST">POST</el-radio>
                    <el-radio v-model="radio" label="PUT">PUT</el-radio>
                    <el-radio v-model="radio" label="DELETE">DELETE</el-radio>
                </template>
                <el-input v-model="addForm.name" placeholder="请输入名称"></el-input>
                <el-input v-model="addForm.moduleName" placeholder="请输入分组名称"></el-input>
                <el-input v-model="addForm.url" placeholder="请输入url"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="potenceVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRolesPotence()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    roles,
    potence,
    rolePotence,
    bindPotence,
    creatRole,
    isrolePotence,
    addPotence
} from "../api/api"
// import $ from jquery
export default {
    data() {
        return {
            Token: localStorage.getItem("token"),
            dialogVisible: false,
            addName: "",
            defaultProps: {
                children: "permisssionList",
                label: "name"
            },
            rolesList: [],
            potenceList: [],
            roleid: "",
            choosePotene: [], //选中的权限id
            loading: false,
            myPotenceId: [], //选中角色所绑定的权限
            potenceVisible: false,
            radio: "GET",
            addForm: {},
            deleteId: ""
        }
    },
    mounted() {
        this.getRoles()
        this.getPotence()
    },
    methods: {
        nodeClick(menuList, checked) {
            //获取也好删除的id
            if (checked) {
                console.log(menuList.id)
                this.deleteId = menuList.id
            }
        },
        removeTree() {
            //删除后台资源权限
            let _this = this
            console.log(_this.deleteId)
            if (_this.deleteId == undefined) {
                _this.$message.error("不可直接删除分组")
                return false
            }
            if (_this.deleteId == "") {
                _this.$message.error("请选择您要删除的权限")
                return false
            }
            _this
                .$confirm("确认删除该菜单?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    _this.$axios
                        .put("permisssion/delete/complete?id=" + _this.deleteId)
                        .then(function(response) {
                            _this.$message({
                                message: "删除后台权限成功",
                                type: "success"
                            })
                            _this.getPotence() //刷新
                        })
                })
                .catch(() => {
                    _this.$message({
                        type: "info",
                        message: "已取消删除"
                    })
                })
        },
        getRoles() {
            //获取角色列表
            this.loading = true
            roles({
                direction: "DESC",
                propertys: "roleName"
            }).then(res => {
                this.loading = false
                this.rolesList = res.data.content.list
            })
        },
        getPotence() {
            //获取所以权限
            this.loading = true
            potence().then(res => {
                this.loading = false
                console.log(res)
                this.potenceList = res.data.content.permisssionList
            })
        },
        getRolesPotence(id) {
            //查询-绑定的后端资源权限
            this.roleid = id
            this.loading = true
            rolePotence({
                roleId: id
            }).then(res => {
                this.loading = false
                let potenceId = res.data.content.rolePermisssionRelationList
                if (potenceId.length > 0) {
                    //角色所绑定的权限不为空
                    this.myPotenceId = [] //绑定之前先清空
                    for (var i = 0; i < potenceId.length; i++) {
                        let Pid = potenceId[i].permission.id
                        this.myPotenceId.push(Pid)
                    }
                    this.$refs.tree.setCheckedKeys(this.myPotenceId)
                } else {
                    this.myPotenceId = [] //如果没有绑定权限，清空
                    this.$refs.tree.setCheckedKeys([])
                }
            })
        },
        bindRolesPotence() {
            //绑定-接口资源权限
            let _this = this
            if (_this.roleid == "") {
                _this.$message.error("请先选择角色")
                return false
            }
            let chooseList = _this.$refs.tree.getCheckedKeys()
            _this.choosePotene = []
            for (var i = 0; i < chooseList.length; i++) {
                if (typeof chooseList[i] != "undefined") {
                    _this.choosePotene.push(chooseList[i])
                }
            }
            $.ajax({
                url:
                    _this.$ajaxBase +
                    "role/permisssion/relation/multiple?roleId=" +
                    _this.roleid,
                type: "POST",
                async: false,
                headers: {
                    "Access-Token": _this.Token,
                    "Content-Type": "application/json"
                },
                data: JSON.stringify(_this.choosePotene),
                success: function(res) {
                    _this.$message({
                        message: "权限绑定成功",
                        type: "success"
                    })
                },
                error: function(error) {
                    _this.$message.error("权限绑定失败")
                }
            })
        },
        crerat() {
            //创建角色
            let _this = this
            _this.dialogVisible = false
            _this.$axios
                .post("role", {
                    roleName: _this.addName,
                    roleInfo: _this.addName
                })
                .then(function(response) {
                    _this.$message({
                        message: "创建角色成功",
                        type: "success"
                    })
                    _this.addName = ""
                    _this.getRoles() //刷新所有角色
                })
                .catch(function(error) {
                    _this.$message.error("创建角色失败，请稍后再试")
                })
        },
        addRolesPotence() {
            //新增权限
            if (
                this.addForm.url == "" ||
                this.addForm.name == "" ||
                this.addForm.moduleName == ""
            ) {
                _this.$message.error("输入框不能为空")
                return false
            }
            addPotence({
                url: this.addForm.url,
                method: this.radio,
                name: this.addForm.name,
                moduleName: this.addForm.moduleName
            }).then(res => {
                this.potenceVisible = false
                this.$message({
                    message: "创建菜单成功",
                    type: "success"
                })
                this.getPotence()
                this.addForm = {}
            })
        }
    },
    computed: {}
}
</script>

<style lang='less' scoped>
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
.role-list {
    li {
        height: 40px;
        line-height: 40px;
        padding-left: 40px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s;
        &.active {
            background: #409eff;
            color: #fff;
        }
        &:hover {
            background: #409eff;
            opacity: 0.8;
            color: #fff;
        }
    }
}
.role {
    .add-btn {
        margin-bottom: 20px;
        padding-left: 40px;
    }
    .save-btn {
        margin-bottom: 20px;
    }
    .el-input {
        margin-top: 20px;
    }
}
</style>

